window.onload = function () {

    app.fadeInOut();

    app.seamlessScroll();

};

var app = {};

app.fadeInOut = function () {

    var oAd = document.getElementById("ad");
    var oLi = oAd.getElementsByTagName("li");

    var iSpeed = 5;
    var isNow = 0;
    var timeOut = 4000;
    var timerAuto = null;
    timerAuto = setInterval(auto, 4000);

    // clearInterval(timerAuto)
    function auto() {
        if(Number(isNow) === oLi.length-1){
            isNow = 0;
        }
        else{
            isNow++;
        }
        for (var i = 0; i < oLi.length; i ++) {
            isAllOut(oLi[i])
        }
        isCurIn(oLi[isNow])
    }


    function isCurIn(ele) {
        var opacity = getComputedStyle(ele, null).opacity;
        if (Number(opacity) === 1) { return }
        var value = 0;
        var timer = null;
        // clearInterval(timer);
        timer = setInterval(function () {
            if (value >= 100) {
                clearInterval(timer)
            } else {
                value += 5;
                ele.style.opacity = value/100;
                ele.style.fiter = "alpha(opacity="+ value +")"
            }
        }, 30)

    }

    function isAllOut(ele) {
        var opacity = getComputedStyle(ele, null).opacity;
        if (Number(opacity) === 0) { return }
        var value = 100;
        var timer = null;
        // clearInterval(timer);
        timer = setInterval(function () {
            if (value <= 0) {
                clearInterval(timer)
            } else {
                value -= 5;
                ele.style.opacity = value/100;
                ele.style.fiter = "alpha(opacity="+ value +")"
            }
        }, 30)
    }
};

app.seamlessScroll = function () {

    var scrollAll = document.getElementById("run1");
    var oUl = scrollAll.getElementsByTagName("ul")[0];
    var oLi = oUl.getElementsByTagName("li");

    var oPrev = scrollAll.getElementsByClassName("prev")[0];
    var oNext = scrollAll.getElementsByClassName("next")[0];

    oUl.innerHTML += oUl.innerHTML;

    oUl.style.width = oLi.length * oLi[0].offsetWidth + 'px';

    var iNow = 0;



    oPrev.onclick = function () {

        if (iNow == 0) {
            iNow = oLi.length/2;
            // oUl.style.left = -oUl.offsetWidth/2 + "px";
        }

        // console.log(oUl.style.left)
        // console.log(oLi[0].offsetWidth)
        // oUl.style.left = -oLi[0].offsetWidth * (iNow-1) + "px";


        var old = -iNow*oLi[0].offsetWidth;
        var now = -(iNow-1)*oLi[0].offsetWidth;
        var onceWidth = oLi[0].offsetWidth;
        var timer = null;

        // clearInterval(timer);
        // timer = setInterval(function(){
        //     var iSpeed = (now - old)/10;
        //     iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        //     console.log(iSpeed);
        //     if(now == old){
        //         clearInterval(timer);
        //     }
        //     else{
        //         old += iSpeed;
        //         oUl.style.left = old + 'px';
        //     }
        //
        // },30);

        clearInterval(timer);
        var offsetLeft = 0;
        timer = setInterval(function () {

            if (offsetLeft >= onceWidth) {
                offsetLeft = onceWidth;
                oUl.style.left = old + offsetLeft + 'px';
                clearInterval(timer);

            } else {
                offsetLeft += 15;
                oUl.style.left = old + offsetLeft + 'px';
            }
        }, 30);

        iNow--;

    };

    oNext.onclick = function () {

        if (iNow == oLi.length/2) {
            iNow = 0;
        }
        oUl.style.left = -oLi[0].offsetWidth * (iNow+1) + "px";
        iNow++;

    }


};
